<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>

    <script src="http://cdn.highcharts.com.cn/highcharts/9.3.2/highcharts.js"></script>


    <script src="http://cdn.highcharts.com.cn/highstock/9.3.2/highstock.js"></script>


    <script src="http://cdn.highcharts.com.cn/highmaps/9.3.2/highmaps.js"></script>

    <script src="http://cdn.highcharts.com.cn/gantt/9.3.2/highcharts-gantt.js"></script>

</head>
<body>
<div id="container"></div>
<script type="text/javascript">
    Highcharts.chart('container', {

        title: {
            text: '店铺收入'
        },

        subtitle: {
            text: ''
        },

        yAxis: {
            title: {
                text: '收入'
            }
        },

        xAxis: {
            accessibility: {
                rangeDescription: 'Range: 18 to 22'
            }
        },

        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
        },

        plotOptions: {
            series: {
                label: {
                    connectorAllowed: false
                },
                pointStart: 18
            }
        },

        series: [{
            name: '海鲜盛宴',
            data: [200, 700, 567, 875, 387, 1000, 2000, 1300]
        }, {
            name: '夏天水果店',
            data: [700, 300, 478, 433, 657, 2000, 366, 980]
        }, {
            name: '春天冷鲜肉',
            data: [436, 656, 876, 787, 345, 566, 2554, 1464]
        }, {
            name: '日日鲜蔬菜',
            data: [null, null, 798, 169, 151, 459, 440, 227]
        }, {
            name: '粮油店',
            data: [908, 548, 805, 248, 989, 1816, 174, 181]
        }, {
            name: '禽蛋全',
            data: [null, 235, 788, 169, 512, 222, 380, 227]
        }, {
            name: '保鲜干果店',
            data: [234, null, 988, 169, 515, 452, 1000, 1200]
        }, {
            name: '土特产大全',
            data: [2341, 2243, 234, 234, 576, 1340, 246, 978]
        }
        ],

        responsive: {
            rules: [{
                condition: {
                    maxWidth: 500
                },
                chartOptions: {
                    legend: {
                        layout: 'horizontal',
                        align: 'center',
                        verticalAlign: 'bottom'
                    }
                }
            }]
        }

    });
</script>
</body>
</html>
